<!-- 首页内容 -->
<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar title="青年旅社">
      <template #right>
        <van-popover v-model:show="showPopover"
        placement="bottom-end" :actions="actions">
          <template #reference>
            <van-icon name="apps-o" size="25" />
          </template>
        </van-popover> 
      </template>
    </van-nav-bar>
    <!-- 首页旅社图片轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
      <van-swipe-item>
        <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
          />
      </van-swipe-item>
      <van-swipe-item>
        <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
          />
      </van-swipe-item>
      <van-swipe-item>
        <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
          />
      </van-swipe-item>
    </van-swipe>
    <!-- 立即预订框 -->
    
      <div class="top-nav">
        <!-- 城市信息 -->
        <div class="city">太原</div>
        <!-- 日期选择 -->
        <div>
          <ul>
            <li>今天入住</li>
            &nbsp;
              <div></div>
            <li>周三离店</li>
          </ul>
        </div>
        <van-button class="btn" round type="primary">立即预订</van-button>
      </div>
      <!-- 广告栏 -->
      <van-notice-bar left-icon="volume-o" color="#39a9ed" background="#fff" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :touchable="false"
          :show-indicators="false"
        >
          <van-swipe-item>北京三日游攻略</van-swipe-item>
          <van-swipe-item>山东青岛/淄博旅游攻略</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
      <!-- 旅游攻略 -->
      <div class="tourism">
        <h2>旅游攻略</h2>
        <span>更多></span>
      </div>
      <van-grid :border="false" :column-num="3" style="padding: 0 10px;">
        <van-grid-item @click="router.push('/strategy')">
          <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
          />
          <p>游玩淄博</p>
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
          />
          <p>游玩淄博</p>
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
          />
          <p>游玩淄博</p>
        </van-grid-item>
      </van-grid>
      <!-- 城市推荐 -->
      <div style="background-color: #ffff;padding: 0 10px;">
        <h2 >爱上一座城</h2>
        <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
          <van-swipe-item>
            <div class="itemSlide">    
                    <img src="https://images.bthhotels.com/webSite/lbt/bj.png" />
                    <div class="card">
                        <h3 class="cityName">北京</h3>
                        <h3 class="cityName_y">Beijing</h3>
                        <h3 class="tips">一条胡同 半个中国</h3>
                    </div>
                </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="itemSlide">    
                    <img src="https://images.bthhotels.com/webSite/lbt/sh.png" />
                    <div class="card">
                        <h3 class="cityName">上海</h3>
                        <h3 class="cityName_y">Shanghai</h3>
                        <h3 class="tips">新潮&复古 最精致</h3>
                    </div>
                </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="itemSlide">    
                    <img src="https://images.bthhotels.com/webSite/lbt/sz.png" />
                    <div class="card">
                        <h3 class="cityName">深圳</h3>
                        <h3 class="cityName_y">Shenzhen</h3>
                        <h3 class="tips">小公园里有大世界</h3>
                    </div>
                </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="itemSlide">    
                    <img src="https://images.bthhotels.com/webSite/lbt/cd.png" />
                    <div class="card">
                        <h3 class="cityName">成都</h3>
                        <h3 class="cityName_y">Chengdu</h3>
                        <h3 class="tips">一首民谣  烟火成都</h3>
                    </div>
                </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="itemSlide">    
                    <img src="https://images.bthhotels.com/webSite/lbt/sanya.png" />
                    <div class="card">
                        <h3 class="cityName">三亚</h3>
                        <h3 class="cityName_y">Sanya</h3>
                        <h3 class="tips">静谧时光 悠然自得</h3>
                    </div>
                </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="itemSlide">    
                    <img src="https://images.bthhotels.com/webSite/lbt/guilin.png" />
                    <div class="card">
                        <h3 class="cityName">桂林</h3>
                        <h3 class="cityName_y">Guilin</h3>
                        <h3 class="tips">中国山水画 人间仙境</h3>
                    </div>
                </div>
          </van-swipe-item>
        </van-swipe>
      </div>
  </div>
</template>

<script setup lang="ts">
import {ref,} from 'vue'
import { useRouter } from 'vue-router';

let router = useRouter()

// 控制右上角的弹窗
const showPopover = ref(false)
const actions = [
  {text:'首页'},
  {text:'订单'},
  {text:'我的'},
  ]
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    height: 80vw;
    color: #fff;
    font-size: 2.6667vw;
    line-height: 20vw;
    text-align: center;
    // background-color: #39a9ed;
    margin: .4vw 0;
  }
  .top-nav{
    display: flex;
    align-items: center;
    height: 6.6667vw;
    padding: 0px 2vw;
    // border-bottom: 1px solid #ccc;
    background-color: #fff;
    margin: 1.3333vw 0 2vw 0;
    .city{
      padding: 1.3333vw;
      font-size: 2.6667vw;
    }

    ul{
      display: flex;
      li{
        margin-left: 2vw;
        font-size: 1.8667vw;
      }
    }
    .btn{
      margin: 0 4vw;
    }
  }
  .tourism{
    display: flex;
    padding: 0 2.6667vw;
    justify-content: space-between;
  }
  .notice-swipe {
    height: 5.3333vw;
    line-height: 5.3333vw;
  }
      .itemSlide{
        position: relative;
        display: flex;
        justify-content: center;
        margin: 10px 0 15px 0;
        
        img{
          width: 100%;
        }

        .card{
          margin-top: 6.6667vw;
          position: absolute; 
          font-size: 25px;
        }
      }
    
  
</style>
